<template>
  <div class="company=page">
    <el-card class="box-card">

        <!-- 精选题库 -->

      <div slot="header" class="clearfix">
        <div class="title">说明：目前支持学科和关键字条件筛选</div>
        <el-button
          style="float: right"
          type="success"
          @click="$router.push('/questions/new')"
        >
          <i class="el-icon-edit"></i>新增试题</el-button
        >
      </div>
      <el-row :gutter="24">
        <el-form ref="form" :model="queryObj" label-width="80px">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.subjectID"
                filterable
                allow-create
              >
                <el-option label="111" value="111"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.catalogID"
                filterable
                allow-create
              >
                <el-option label="22" value="22"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.tags"
                filterable
                allow-create
              >
                <el-option label="好学" value="好学"></el-option>
                <el-option label="难学" value="难学"></el-option>
                <el-option label="还可以" value="还可以"></el-option>
                <el-option label="中等" value="中等"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item label="关键字">
              <el-input
                style="width: 260px"
                v-model="queryObj.keyword"
                placeholder="根据题干搜索"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.questionType"
              >
                <el-option label="单选" value="1">单选</el-option>
                <el-option label="多选" value="2">多选</el-option>
                <el-option label="简答" value="3">简答</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.difficulty"
              >
                <el-option label="简单" value="1">简单</el-option>
                <el-option label="一般" value="2">一般</el-option>
                <el-option label="困难" value="3">困难</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.direction"
              >
                <el-option label="o2o" value="o2o"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="企业服务" value="企业服务"></el-option>
                <el-option label="互联网进入" value="互联网进入"></el-option>
                <el-option label="企业咨询" value="企业咨询"></el-option>
                <el-option label="互联网" value="互联网"></el-option>
                <el-option label="电子商务" value="电子商务"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                style="width: 260px"
                placeholder="请选择"
                v-model="queryObj.creatorID"
                filterable
                allow-create
              >
                <el-option label="管理员" value="管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item label="题目备注">
              <el-input
                v-model="queryObj.remarks"
                style="width: 260px"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称">
              <el-input
                v-model="queryObj.shortName"
                style="width: 260px"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <div>
              <el-row :gutter="12" type="flex">
                <el-col :span="6"
                  ><el-form-item label="城市">
                    <el-select
                      style="width: 120px"
                      placeholder="请选择"
                      v-model="queryObj.province"
                      @change="handleProvince"
                    >
                      <el-option
                        v-for="item in citySelect.province"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6"
                  ><el-form-item class="city">
                    <el-select
                      style="width: 120px"
                      placeholder="请选择"
                      v-model="queryObj.city"
                    >
                      <el-option
                        v-for="item in citySelect.cityDate"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select> </el-form-item
                ></el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <el-form-item style="float: right; margin-right: 30px">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-alert
        :title="`共${total}条记`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <el-table :data="tableData" style="width: 100%" v-loading='loading'>
        <el-table-column
          prop="number"
          label="试题编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="subjectID"
          label="学科"
          align="center"
          width="70px"
        ></el-table-column>
        <el-table-column
          prop="catalogID"
          label="目录"
          align="center"
          width="70px"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          align="center"
          width="60px"
          :formatter="changeType"
        ></el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          align="center"
          :formatter="changeQuestion"
        ></el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="100px"
          :formatter="formatDate"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          align="center"
          width="100px"
          :formatter="changedifficulty"
        >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          align="center"
          width="100px"
          :formatter="changeChkState"
        >
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          align="center"
          width="100px"
          :formatter="changePulState"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="300px">
          <template #default="{ row }">
            <div class="actions" style="width: 300px">
              <el-button type="text" @click="open('preview', row.id)"
                >预览</el-button
              >
              <el-button
                type="text"
                :disabled="row.chkState !== 0"
                @click="audit(row)"
                >审核</el-button
              >
              <el-button type="text" @click="update(row.id)">修改</el-button>
              <el-button
                v-if="!row.publishState"
                type="text"
                @click="changeState('下架',row.id)"
                >上架</el-button
              >
              <el-button v-else type="text" @click="changeState('上架',row.id)"
                >下架</el-button
              >
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryObj.pageSize"
        layout="prev,pager,next,sizes,jumper"
        :total="this.total"
      >
      </el-pagination>
    </el-card>
    <QuestionsPreview
      ref="dialog"
      @handleCloseModal="handleCloseModal"
      :formBase="formBase"
    ></QuestionsPreview>
    <QuestionsCheck ref="audit" :row='row'></QuestionsCheck>
  </div>
</template>

<script>
import { remove, detail, choice, choicePublish } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsCheck from '@/module-hmmm/components/questions-check'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []
      },
      flag: true,
      search: '',
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      type: '',
      text: '',
      loading: false,
      formBase: {
        id: '', // id
        number: '', // 试题编号
        subjectID: '', // 学科
        catalogID: '', // 目录
        questionType: '', // 题型
        difficulty: '', // 难度
        tags: '', // 标签
        direction: '', // 方向
        question: '', // 题干
        options: [],
        videoURL: '', // 视频解析
        answer: '', // 答案解析
        remarks: '' // 题目备注
      },
      row: ''
    }
  },
  async created () {
    this.initData()
    this.getCityData()
  },
  methods: {
    // 初始化列表
    async initData () {
      this.loading = true
      const { data } = await choice(this.queryObj)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
      this.loading = false
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.initData()
    },
    changedifficulty (row, column) {
      // console.log(row[column.property])
      if (row[column.property] === '1') {
        return '简单'
      } else if (row[column.property] === '2') {
        return '一般'
      } else if (row[column.property] === '3') {
        return '困难'
      }
    },
    changeType (row, column) {
      if (row[column.property] === '1') {
        return '单选'
      } else if (row[column.property] === '2') {
        return '多选'
      } else if (row[column.property] === '3') {
        return '简答'
      }
    },
    changeChkState (row, column) {
      if (row[column.property] === 0) {
        return '待审核'
      } else if (row[column.property] === 1) {
        return '已审核'
      } else if (row[column.property] === 2) {
        return '已拒绝'
      }
    },
    changePulState (row, column) {
      if (row[column.property] === 1) {
        return '已上架'
      } else if (row[column.property] === 0) {
        return '已下架'
      }
    },
    // 处理掉<p></p>
    changeQuestion (row, column) {
      return row[column.property].replace(/<[^>]+>/g, '')
    },
    // 时间格式化
    formatDate (row, column) {
      // 获取单元格数据
      const datac = row[column.property]
      const dtc = new Date(datac)
      // 获取月,默认月份从0开始
      let dtuMonth = dtc.getMonth() + 1
      // 获取日
      let dtuDay = dtc.getDate()
      // 处理1-9月前面加0
      if (dtuMonth < 10) {
        dtuMonth = '0' + (dtc.getMonth() + 1)
      }
      // 处理1-9天前面加0
      if (dtuDay < 10) {
        dtuDay = '0' + dtc.getDate()
      }
      // 获取小时
      let dtuHours = dtc.getHours()
      // 处理1-9时前面加0
      if (dtuHours < 10) {
        dtuHours = '0' + dtc.getHours()
      }
      // 获取分钟
      let dtuMinutes = dtc.getMinutes()
      // 处理1-9分前面加0
      if (dtuMinutes < 10) {
        dtuMinutes = '0' + dtc.getMinutes()
      }
      // 获取秒
      let dtuSeconds = dtc.getSeconds()
      // 处理1-9秒前面加0
      if (dtuSeconds < 10) {
        dtuSeconds = '0' + dtc.getSeconds()
      }
      // 组装年月日时分秒,按自己的要求来
      return (
        dtc.getFullYear() +
        '-' +
        dtuMonth +
        '-' +
        dtuDay +
        ' ' +
        dtuHours +
        ':' +
        dtuMinutes +
        ':' +
        dtuSeconds
      )
      // return (row.TableIsbibei = dd)
      // + " " + dtuHours + ":" + dtuMinutes + ":" + dtuSeconds
    },
    async changeState (type, id) {
      if (type === '上架') {
        await choicePublish({ id, publishState: 0 })
        this.initData()
      } else {
        await choicePublish({ id, publishState: 1 })
        this.initData()
      }
    },
    // 审核
    audit (row) {
      this.row = row
      this.$refs.audit.dialogFormV()
    },
    update (id) {
      this.$router.push({ path: '/questions/new', query: { id, type: 'choice' } })
    },
    // 删除
    async del (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const obj = { id }
          const res = await remove(obj)
          this.initData()
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    },
    // 打开弹窗
    async open (type, id) {
      this.type = type
      this.$refs.dialog.dialogFormV()
      if (this.type === 'preview') {
        const { data } = await detail({ id })
        console.log(data)

        this.formBase.id = data.id
        this.formBase.questionType = data.questionType
        this.formBase.difficulty = data.difficulty
        this.formBase.tags = data.tags
        this.formBase.subjectID = data.subjectID
        this.formBase.catalogID = data.catalogID
        this.formBase.direction = data.direction
        this.formBase.question = data.question.replace(/<[^>]+>/g, '')
        this.formBase.options = data.options
        this.formBase.videoURL = data.videoURL
        this.formBase.answer = data.answer.replace(/<[^>]+>/g, '')
        this.formBase.remarks = data.remarks
      }
    },
    // 关闭弹窗
    handleCloseModal () {
      this.$refs.dialog.dialogFormH()
    },

    clear () {
      this.queryObj.subjectID = ''
      this.queryObj.catalogID = ''
      this.queryObj.tags = ''
      this.queryObj.keyword = ''
      this.queryObj.questionType = ''
      this.queryObj.difficulty = ''
      this.queryObj.direction = ''
      this.queryObj.creatorID = ''
      this.queryObj.remarks = ''
      this.queryObj.shortName = ''
      this.queryObj.province = ''
      this.queryObj.city = ''
      // this.initData()
    },
    searchFn () {
      this.initData()
    }
  },
  computed: {
    pageTitle () {
      if (this.type === 'add') return '创建用户'
      if (this.type === 'edit') return '编辑用户'
      else return 'add'
    }
  }
}
</script>

<style scoped lang="less">
.city {
  margin-left: 45px;
}
.title {
  color: #ffc0cb;
  font-size: 12px;
}
.box-card {
  margin: 20px;
}
// /deep/.el-input__inner {
//   width: 300px;
// }
/deep/.el-row {
  margin-bottom: 0px !important;
}
.el-form-item {
  text-align: left;
}
.el-pagination {
  margin-top: 30px;
  text-align: right;
}
/deep/.el-pagination__jump {
  margin-left: 0;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
